const Shape = require("./shape.js")
const Utils = require("./utils.js")
const Evt = require("./event.js")
const {CN,EN} = require("./constant.js")

module.exports = class ColorPicker extends Evt{
	constructor($env,$event){
		super()
		this.$event = $event;
		let setting=this.__setting={
			w:220,
			h:160,
			colors:["rgb(51, 51, 51)", "rgb(51, 51, 204)", "rgb(51, 102, 51)", "rgb(51, 102, 102)", "rgb(51, 102, 204)", "rgb(51, 153, 51)", "rgb(51, 153, 102)", "rgb(51, 153, 153)", "rgb(51, 153, 204)", "rgb(51, 204, 51)", "rgb(51, 204, 153)", "rgb(51, 204, 204)", "rgb(102, 51, 102)", "rgb(102, 51, 204)", "rgb(102, 102, 51)", "rgb(102, 102, 102)", "rgb(102, 153, 51)", "rgb(102, 153, 102)", "rgb(102, 153, 204)", "rgb(102, 204, 102)", "rgb(153, 51, 51)", "rgb(153, 51, 102)", "rgb(153, 51, 153)", "rgb(153, 51, 204)", "rgb(153, 102, 102)", "rgb(153, 102, 153)", "rgb(153, 153, 51)", "rgb(153, 204, 51)", "rgb(204, 51, 51)", "rgb(204, 51, 102)", "rgb(204, 102, 51)", "rgb(204, 102, 102)", "rgb(204, 153, 51)", "rgb(204, 153, 153)", "rgb(204, 204, 51)"]
		}
		this.$dom = Utils.createDOM("div",{
			id:"color-picker-mask",
			class:`${CN.hide} base-mask`
		}) 
		this.$picker = Utils.createDOM("canvas",{
			id:"color-picker-cvs",
			class:"color-picker-cvs",
			width:setting.w,
			height:setting.h
		})
		this.$dom.appendChild(this.$picker)
		this.ctx = this.$picker.getContext("2d")

		$event.emit(EN.append,this.$dom)
		this.initColorPanel(this.$picker)
		this.bind()
	}
	initColorPanel(picker){
		let ctx = this.ctx;

		this.__setting.colors.forEach((c,i)=>{
	       let d = i%7;
	       let r = i%5;
	       let x = d*20+(d+1)*10;
	       let y = r*20+(r+1)*10;

	       ctx.strokeStyle="#d0d0d0";
	       ctx.fillStyle=c;
	       ctx.strokeRect(x,y,20,20);
	       ctx.fillRect(x,y,20,20);
	    })
	}
	bind(){
		this.$dom.addEventListener("click",(e)=>{
			this.hide()
		})
		this.$picker.addEventListener("click",(e)=>{
			this.$event.emit("color:pick",this.pick(e))
		})
		this.$picker.addEventListener("mousemove",(e)=>{
			let {x,y} = this.calcPos(e)

			this.$picker.classList[this.isInPath(x,y)?"add":"remove"](CN.pointer)
		})
	}
	calcPos(e){
		let doc = document.documentElement
		let rect = e.target.getBoundingClientRect()
		let x = e.pageX - rect.left - doc.scrollLeft
		let y = e.pageY - rect.top - doc.scrollTop
		return {x,y}
	}
	isInPath(px,py){
		let ctx = this.ctx;
		return this.__setting.colors.some((c,i)=>{
	       let d = i%7;
	       let r = i%5;
	       let x = d*20+(d+1)*10;
	       let y = r*20+(r+1)*10;
	       return (px>=x&&px<=x+20&&py>=y&&py<=y+20)
	    })
	}
	pick(e){
		let {x,y} = this.calcPos(e)
		let pixes = this.ctx.getImageData(x,y,1,1).data;
		let r = Number(pixes[0]);
		let g = Number(pixes[1]);
		let b = Number(pixes[2]);
		let a = Number(pixes[3]);
		let r16 = r.toString(16);
			r16=r16.length===1?"0"+r16:r16;
		let g16 = g.toString(16);
			g16=g16.length===1?"0"+g16:g16
		let b16 = b.toString(16);
			b16=b16.length===1?"0"+b16:b16
		let a16 = a.toString(16);
			a16=a16.length===1?"0"+a16:a16
		let rgb = `rgb(${r},${g},${b})`;
		let rgba = `rgba(${r},${g},${b},${a})`;
		let c16 = `#${r16}${g16}${b16}`
		let ca16 = `#${r16}${g16}${b16}${a16}`
		return {
			r,g,b,a,
			rgb,rgba,c16,ca16
		}
	}
	show(data){
		let e = data.rect;
		this.$picker.style.cssText = `left:${e.width+5}px;top:${e.top}px`
		this.$dom.classList.remove(CN.hide)
	}
	hide(){
		this.$dom.classList.add(CN.hide)
	}

}